<!--
 * @Author: xuwejie 1529315455@qq.com
 * @Date: 2023-11-14 14:22:47
 * @LastEditors: xuwejie 1529315455@qq.com
 * @LastEditTime: 2023-12-21 14:39:39
 * @FilePath: \cdj-jyt_school-vue\src\views\newBigData\MyEchart.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!-- 该文件用于封装图表 -->
<template>
  <div class="chart">
    <!-- 图表容器 -->
    <div class="chart_body"></div>
  </div>
</template>

<script>
//引入echarts
import * as echarts from "echarts";

export default {
  name: "my-chart",
  props: {
    option: { type: Object, default: () => ({}) },
    // myWidth: { type: String, default: "437px" },
    // myHeight: { type: String, default: "201px" },
  },
  watch: {
    option: {
      immediate: true,
      deep: true,
      handler(newVal) {
        // option 改变了，就重新在 setOption 一次即可
        this.$nextTick(() => {
          this.myChart.setOption(newVal);
        });
      },
    },
  },
  mounted() {
    this.myChart = echarts.init(this.$el.querySelector(".chart_body"));

    // 做配置
    this.myChart.setOption(this.option);
  },
};
</script>

<style lang="scss" scoped>
.chart_body {
  background: rgba(16, 27, 168, 0.15);
  border: 2px solid;
  border-image: linear-gradient(-90deg, #070f63, #3d61f3) 2 2;
  box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.15);
  width: 27.3125rem;
  height: 15.875rem;
}
</style>